<template>
	<view class="user-login">
		<image src="../../static/logo.png" mode=""></image>
		<view class="login-form">
			<view class="item">
				<span>账号：</span>
				<input type="text" placeholder="请输入手机号"/>
			</view>
			<view class="item" v-if="isPwd">
				<span>验证码：</span>
				<input type="text" placeholder="请输入密码"/>
				<p>获取验证码</p>
			</view>
			<view class="item" v-else>
				<span>密码：</span>
				<input type="password" placeholder="请输入密码"/>
			</view>
		</view>
		<view class="btn">
			<view class="btn1">
				<span>登录</span>
			</view>
			<view class="btn2" @click="accountLogin">
				<span>{{isPwd ? '账号登录' : '验证码登录'}}</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPwd:true
			}
		},
		methods: {
			accountLogin(){
				this.isPwd=!this.isPwd
			},
		}
	}
</script>

<style scoped lang="scss">
.user-login{
	height:100vh;
	background-color:#f5f5f5;
	image{
		width:120px;
		height:120px;
		margin:60px 34%;
	}
	.btn{
		.btn1{
			width:85%;
			margin:20px auto;
			height:90rpx;
			text-align:center;
			color:#ffffff;
			line-height:90rpx;
			border-radius:20px;
			background-color:#ff0000;
		}
		.btn2{
			width:85%;
			margin:0 auto;
			height:90rpx;
			text-align:center;
			color:#888888;
			border-radius:20px;
		}
	}
	.login-form{
		width:90%;
		height:auto;
		background-color:#ffffff;
		border-radius:10px;
		padding:10px;
		margin:0 auto;
		.item{
			display:flex;
			align-items:center;
			input{
				border:none;
				height:60px;
				width:180px;
			}
			span{
				width:70px;
			}
			p{
				color:#ff0000;
			}
		}
		.item:nth-child(1){
			border-bottom:1px solid #f0f0f0;
		}
	}
}
</style>
